<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<c:set var="webroot" value="${pageContext.request.contextPath}" />
<script type="text/javascript"
	src="${webroot}/static/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript"
	src="${webroot}/static/js/bootstrap.min.js"></script>
<script type="text/javascript"
	src="${webroot}/static/js/bootstrap-table.js"></script>

<script type="text/javascript" src="${webroot}/static/js/layer/layer.js"></script>
<script src="${webroot}/static/js/jquery.form.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css"
	href="${webroot}/static/js/layer/skin/layer.css" />
<link rel="stylesheet" type="text/css"
	href="${webroot}/static/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css"
	href="${webroot}/static/css/bootstrap-table.min.css" />
<head>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<style type="text/css">
.layui-btn-container .layui-btn+.layui-btn {
    margin-left: 0;
}
.layui-btn-container .layui-btn {
    margin-right: 10px;
    margin-bottom: 10px;
}

.layui-btn+.layui-btn {
    margin-left: 10px;
}
.layui-btn {
    display: inline-block;
    height: 38px;
    line-height: 38px;
    padding: 0 18px;
    background-color: #009688;
    color: #fff;
    white-space: nowrap;
    text-align: center;
    font-size: 14px;
    border: none;
    border-radius: 2px;
    cursor: pointer;
}
.layui-btn-primary {
    border: 1px solid #C9C9C9;
    background-color: #fff;
    color: #555;
}
.layui-btn-normal {
    background-color: #1E9FFF;
}
.control-group {
	width: 60%;
	margin-top: 30px;
	padding-left: 60px;
}

.labs {
	width: 120px;
	text-align: right;
	display: table-cell;
	vertical-align: middle;
}

.control {
	display: table-cell;
	padding-left: 3px;
}

.control-input {
	width: 185px;
}

.control-button {
	float: right;
	padding-right: 120px;
	padding-top: 10px;
}

.control-button-input {
	float: right;
	position: relative;
	top: -34px;
	right: 25px;
	width: 85px;
	height: 30px;
}

.control-button-input1 {
	background-color: #b96146;
	border-color: #b96146;
	color: aliceblue;
	width: 60px;
	height: 28px;
	border-radius: 8px;
}

.control-button-input2 {
	background-color: #03A9F4;
	border-color: #03A9F4;
	color: aliceblue;
	width: 100px;
	height: 31px;
	border-radius: 8px;
}
.error{
    color:#dd2222;
}
.control-select {
    width: 120px;
    border-width: 1px;
    border-style: solid;
    background-color: #fff;
    border-radius: 4px;
    border-color: #9e9e9e96;
    height: 30px;
}
</style>
</head>
<body style="overflow-x: hidden;">
		<div style="border-bottom: 2px solid #9e9e9e;">
			<h5>banner配置>banner编辑</h5>
		<!-- 	<input type="button" value="返回" id="btn_query"
				class="control-button-input" onclick="cole();" /> -->
		</div>
		<form class="order-form" id="filterForm">
		  <input type="hidden" id="id" name="id" value="${banner.id}" />
		  <input type="hidden" id="pictureTitie" name="pictureTitie" value="${banner.pictureTitie}" />
			<div class="control-group">
				<label class="labs">所有栏目:</label>
				<div class="control">
					<select id="type" name="type" class="control-select">
					<c:if test="${banner.type == 0}">
						<option value="0" selected="selected">自制栏目</option>
						<option value="1">链接栏目</option>
						<option value="2">广告位配置栏目</option>
					</c:if>
					<c:if test="${banner.type == 1}">
						<option value="0">自制栏目</option>
						<option value="1" selected="selected">链接栏目</option>
						<option value="2">广告位配置栏目</option>
					</c:if>
					<c:if test="${banner.type == 2}">
						<option value="0">自制栏目</option>
						<option value="1">链接栏目</option>
						<option value="2" selected="selected">广告位配置栏目</option>
					</c:if>
					<c:if test="${banner.type == undefined}">
						<option value="0">自制栏目</option>
						<option value="1">链接栏目</option>
						<option value="2">广告位配置栏目</option>
					</c:if>
					</select>
				</div>
			</div>
			<div class="control-group">	
				<label class="labs">图片标题:</label>
				<div class="control" onclick="upload();">
					<div style="border: 3px solid #0000004a;">
					  <c:if test="${banner.pictureTitie != null}">
                           <img alt="" id="imgIds" src="${banner.pictureTitie}" style="width: 185px;height: 125px;"/>
					  </c:if>
					  <c:if test="${banner.pictureTitie == null}">
   						  <img alt="" id="imgIds" src="${webroot}/static/images/wuxiao.png" style="width: 185px;height: 125px;"/>					 
   					  </c:if>
					</div>
				</div>
			</div>
			<div class="control-group" id="contentId" style="display: none;">	
				<label class="labs">链接:</label>
				<div class="control">
					 <input type="text" class="control-input" id="contentUrl" name="contentUrl" value="${banner.content}">
				</div>
			</div>
		</form>
		<div style="padding-left: 12%; padding-top: 18px; display: none;" id="butsn">
			<input type="button" class="layui-btn layui-btn-normal" onclick="save();" value="确认">&nbsp;&nbsp;
			<input type="button" class="layui-btn layui-btn-primary" onclick="cole();" value="取消">
		</div>
	<div style="padding: 38px 140px; margin: 1px;" id="edsid">
	    <h4 style="display:inline-block;vertical-align: top;">内容:</h4>
		<div style="width: 60%;display:inline-block">
			<script id="agreementText" type="text/plain" style="height: 300px;"></script>
		</div>
        <div style="padding-left: 38%; padding-top: 18px;">
			<input type="button" class="layui-btn layui-btn-normal" onclick="save();" value="确认">&nbsp;&nbsp;
			<input type="button" class="layui-btn layui-btn-primary" onclick="cole();" value="取消">
		</div>
	</div>
	<input type="file" id="file" style="display: none;" onchange="uploadPic();">
</body>
<script src="${webroot}/static/js/utf8-jsp/ueditor.config.js"
	type="text/javascript"></script>
<script src="${webroot}/static/js/utf8-jsp/ueditor.all.js" type="text/javascript"></script>
<script type="text/javascript">
var ue = UE.getEditor('agreementText', {
	readonly : "2" == "1" ? true : false,
		/* 	  toolbars: [
			            ['source','undo', 'redo', 'bold', 'italic', 'underline','justifyleft','emotion','simpleupload','formatmatch','autotypeset','inserttable','directionalityltr','directionalityrtl','attachment']
			      ],  */
			       autoHeightEnabled: true,
			       initialFrameWidth : 1000
});

UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
UE.Editor.prototype.getActionUrl = function(action) {
    if ( action == 'uploadimage' ||  action == 'uploadvideo' ||  action == 'uploadfile') {
    	if(action == 'uploadvideo'){
    		return '${webroot}/videoUpload';
    	}
    	if(action == 'uploadfile'){
    		return '${webroot}/fileUpload';
    	}
    	return '${webroot}/imgUpload';
    } else {
        return this._bkGetActionUrl.call(this, action);
    }
}

$("#agreementText").val('${banner.content}');

$("#type").change(function(){
	if($(this).val() == '1' || $(this).val() == '2'){
		$("#edsid").hide();
		$("#contentId").show();
		$("#butsn").show();
	}else{
		$("#edsid").show();
		$("#contentId").hide();
		$("#butsn").hide();
	}
});

function upload(i,id){
	$('#file').click();
}

if('${banner.type}' != undefined){
	if('${banner.type}' == '1'){
		$("#edsid").hide();
		$("#contentId").show();
		$("#butsn").show();
	}else{
		$("#edsid").show();
		$("#contentId").hide();
		$("#butsn").hide();
	}
}

//异步上传图片
function uploadPic() {
	var imger = $("#file").val();
	if ($("#file").val() == "") {
		return false;
	}
	var fd = new FormData();
	fd.append("file", $("#file")[0].files[0]); //将文件转成二进制形式
	fd.append("orderBy", $("#imgId").val());
	fd.append("id", $("#id").val());
	fd.append("type", 0);
	fd.append("imgType", 1);
	     $.ajax({
				url : "${webroot}/file/upold",
				type : "POST",
				data : fd,
				processData : false, // 告诉jQuery不要去处理发送的数据
				contentType : false, // 告诉jQuery不要去设置Content-Type请求头
				success : function(data) {
					if (data == 1) {
						appLayer.info("图片格式不对!");
						return false;
					}
					var isJpg = data.indexOf("jpg");
					var isPng = data.indexOf("png");
					var img = data.replace("\"","").replace("\"","");
					if (isJpg > 0 || isPng > 0) { 
                        $('#imgIds').attr("src",img);
                        $('#pictureTitie').val(img);
					} else {
						appLayer.info("图片上传失败！");
					}
				},
				error : function(resp) {
                     console.log(resp)
				}
			});
};

function save(){
	var content = null;
	if($("#type option:selected").val() == 0){
		content = ue.getContent();
		 if(content == ''){
			return layer.msg("内容不能为空");
		 } 
	}else{
		content = $("#contentUrl").val();
		 if(content == ''){
			return layer.msg("链接不能为空");
		 } 
	}
	var url = ""; var name = "";
	if($("#id").val() != ""){
		url = "${webroot}/banner/update";
	}else{
		url = "${webroot}/banner/insert";
	}
 	$.ajax({
		url : url,
		type : "POST",
		dataType : "json",
		data:{
			id : $("#id").val(),
			content : content,
			type : $("#type option:selected").val(),
			pictureTitie : $("#pictureTitie").val()
		},
		async : false,
		cache : false,
		success : function(obj) {
              if(obj.success){
            	  layer.msg("操作成功");
            	  setTimeout('window.location.reload()',3000);
              }else{
            	  layer.msg(obj.message);
              }
		}
	});
}

function cole(){
	window.location.href = '${webroot}/banner/showlist?id=${resourceId}';
}

</script>
</html>
